<template>
  <div class="redirect-page">
    <!-- 居中头像 -->
    <div class="avatar-center">
      <el-dropdown trigger="click">
        <span class="el-dropdown-link cursor-pointer flex items-center">
          <el-avatar
            :src="avatarUrl || defaultAvatar"
            size="120"
            class="avatar"
          />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-upload
                :http-request="customUploadRequest"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
              >
                <span>上传头像</span>
              </el-upload>
            </el-dropdown-item>
            <el-dropdown-item divided @click="handleGetUserProfile">
              查询当前用户信息
            </el-dropdown-item>
            <el-dropdown-item divided @click="logout">
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!-- 居中卡片 -->
    <div class="card">
      <h1 class="text-3xl font-bold mb-6 text-white">
        🎉 欢迎！快去学习！！！
      </h1>
      <p class="mb-10 text-white">请选择您要前往的功能页面：</p>

      <div class="space-y-4">
        <el-button type="primary" size="large" @click="goToPracticeView">
          📚 查看题库列表
        </el-button>
        <el-button type="primary" size="large" @click="goToManage">
          📝 进入考试管理中心
        </el-button>

        <el-button type="primary" size="large" @click="logout">
          退出登录
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"; // ✅ 这里引入 onMounted
import { useRouter } from "vue-router";
import { uploadAvatar } from "../api/user";
import { getUserProfile } from "../api/userProfiles";
import { ElMessage } from "element-plus";

const router = useRouter();
const userSystemRole = ref(""); // 新增：存角色
const avatarUrl = ref("");

const goToPracticeView = () => router.push("/api/question/questions");
const goToManage = () => router.push("/api/manage/manages");

const customUploadRequest = async ({ file }) => {
  try {
    const res = await uploadAvatar(file); // 假设返回的就是 URL 字符串
    const url = res.data; // 如果是字符串，比如 "http://xxx.com/xxx.jpg"

    avatarUrl.value = url;
    localStorage.setItem("avatarUrl", url); // 缓存头像 URL
    ElMessage.success("头像上传成功");
  } catch (err) {
    ElMessage.error("上传失败，请重试");
  }
};

const beforeAvatarUpload = (file) => {
  const isImage = file.type.startsWith("image/");
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isImage) ElMessage.error("只能上传图片文件");
  if (!isLt2M) ElMessage.error("图片大小不能超过 2MB");

  return isImage && isLt2M;
};

const fetchUserInfo = async () => {
  try {
    const res = await getUserProfile();
    const data = res.data;
    avatarUrl.value = data.url;
    userSystemRole.value = data.userSystemRole || "";
  } catch (err) {
    ElMessage.error("获取用户信息失败");
  }
};

const handleGetUserProfile = () => {
  router.push("/api/userProfile/userProfiles");
};

const logout = () => {
  localStorage.clear();
  ElMessage.success("已退出登录");
  router.push("/api/user/login");
};

onMounted(() => {
  fetchUserInfo(); // 页面加载时拉取信息
});
</script>

<style scoped>
/* 居中头像 */
.avatar-center {
  margin-bottom: 30px;
}

.avatar {
  width: 100px !important;
  height: 100px !important;
  border: 3px solid #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s;
}
.avatar:hover {
  transform: scale(1.05);
}

.redirect-page {
  height: 100vh;
  background: url("../assets/student.png") center center / cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.card {
  background-color: rgba(250, 250, 250, 0.6); /* 半透明黑色背景 */
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  text-align: center;
}
</style>
